@charset "utf-8";

@import "reset";

@function vw($a){
    @return ( $a / 320 ) * 100vw;
}

html,body,.web{
    width: 100%;
    height: 100%;
    background: black;
    color: white;
}

.index-bgm{
    position: fixed;
    width: vw(47);
    height: vw(25);
    z-index: 20;
    top: vw(25);
    right: vw(17);
    >div{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .index-bgm-pic{
        opacity: .5;
        img{
            position: absolute;
            top: vw(6.8);
            left: vw(7.5);
            width: vw(32);
            height: vw(11);
        }
    }
    .index-bgm-pic-active{
        img{
            width: 100%;
            height: 100%;
        }
    }
    p{
        font-size: vw(6);
        white-space: nowrap;
        text-align: center;
        line-height: vw(50);
    }
}

.redC{
    color: rgb(247,142,142);
    opacity: .9;
    text-shadow: red 0 0 20px;
}
.blueC{
    color: #79c0ff;
    text-shadow: #03050a 0 0 5px;
}


//失败

.shibai{
    position: fixed;
    z-index: 30;
    width: 100%;
    height: 100%;
    background: url(../img/index-bg2.jpg);
    background-size: 100% 100%;
    transform: scale(0);
    p{
        text-align: center;
        font-size: vw(20);
        margin-top: 100px;
    }
    ul{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        li{
            position: absolute;
        }
    }
    li.zailai{
        bottom: vw(200);
        right: 0;
        width: vw(169.5);
        height: vw(75.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li.fanhui{
        bottom: vw(120);
        right: 0;
        width: vw(169.5);
        height: vw(75.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
}

.shibaia{
    animation: shibai 1s both;
}
@keyframes shibai{
    0%{
        opacity: 0;
        transform: scale(2);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
.page3-you{
    position: absolute;
    width: vw(6.5);
    height: vw(12);
    img{
        width: 100%;
        height: 100%;
    }
}
li .page3-you:first-of-type{
    left: 16%;
    top: 36%;
}
li .page3-you:nth-of-type(2){
    left: 20%;
    top: 36%;
}
li .page3-you:nth-of-type(3){
    right: 28%;
    width: vw(7);
    top: 36%;
}
li .page3-you:nth-of-type(4){
    right: 32%;
    width: vw(7);
    top: 36%;
}

.succes{
    position: fixed;
    z-index: 30;
    width: 100%;
    height: 100%;
    background: url(../img/game/game1-succes-bg.jpg) no-repeat;
    background-size: 100% 100%;
    transform: scale(0);
    transition: 1s;
    box-sizing: border-box;
    padding-top: 100px;
    p{
        text-align: center;
        font-size: vw(20);
        margin-bottom: 20px;
    }
    p:first-of-type{
        font-size: vw(15);
    }
    p:nth-of-type(2){
        font-size: vw(11);
    }
}
.succesa{
    transform: scale(1);
}

.wuzi-box{
    position: absolute;
    left: vw(35);
    .wuzi{
        width: vw(255.5);
        height: vw(73);
        background: url(../img/game/game-succes-chakan-bg.png);
        background-size: 100% 100%;
        position: relative;
        >*{
            position: absolute;
        }
        .wuzi-pic{
            top: 17%;
            left: 12%;
            img{
                width: 100%;
                height: 100%;
            }
        }
        p{
            top: 42%;
            left: 33%;
            font-size: vw(11);
        }
        .wuzi-chakan{
            top: 37%;
            left: 60%;
            width: vw(56.5);
            height: vw(23.5);
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    #wuzi1 .wuzi-pic{
        width: vw(53.5);
        height: vw(49);
    }
    #wuzi2 .wuzi-pic{
        width: vw(51.5);
        height: vw(49);
    }
    #wuzi3 .wuzi-pic{
        width: vw(48.5);
        height: vw(52);
    }
    #wuzi4 .wuzi-pic{
        width: vw(59.5);
        height: vw(49);
    }
    #wuzi5 .wuzi-pic{
        width: vw(53.5);
        height: vw(54);
    }
    #wuzi6 .wuzi-pic{
        width: vw(59);
        height: vw(51);
    }
}

.xiayiguan{
    position: absolute;
    bottom: vw(50);
    right: 0;
    li.xiayig{
        
        width: vw(231.5);
        height: vw(75);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li .page3-you:first-of-type{
        left: 14%;
        top: 34%;
    }
    li .page3-you:nth-of-type(2){
        left: 18%;
        top: 34%;
    }
    li .page3-you:nth-of-type(3){
        right: 49%;
        top: 34%;
    }
    li .page3-you:nth-of-type(4){
        right: 53%;
        top: 34%;
    }
}

.xiayi1{
    position: absolute;
    top: 18%;
    left: 8%;
    width: vw(114);
    height: vw(37);
}
.qiangqing{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/game/game-chakan-bg.png) rgba(0,0,0,.7) no-repeat;
    background-size: vw(305) vw(349.5);
    background-position: 25% 40%;
    transform: scale(0);
    transition: 1s;
    .qiangqing-guanbi{
        position: fixed;
        top: 19%;
        left: 82%;
        width: vw(30);
        height: vw(30);
    }
    .qiangqing-content{
        position: absolute;
        top: 21%;
        left: 16.5%;
        width: vw(212);
        height: vw(280);
        box-sizing: border-box;
        padding-top: 10px;
        .qiangqing-text1{
            font-size: vw(14);
            text-align: center;
            white-space: nowrap;
        }
         .qiangqing-text2{
            font-size: vw(10);
            text-align: justify;
            padding: 0 3%;
        }
        .qiangqing-pic{
            width: vw(168);
            height: vw(168);
            margin: 0 auto 5px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    
}

.qiangqinga{
    transform: scale(1);
}
